<template>
<div class="date-piker">
    <editStockPop :active='singleStockShow' :dateShowContent='dateShowContent' :singleStockData='singleStockData' @oncancel='singleStockShow=false' @onsubmit="updatesingleStock"></editStockPop>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>{{month}}月</th>
                <th v-for="item in weekDay">{{item}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="list in stockDateCom" :class="{}">
                <td>
                    <div class="date-li-header">日期</div>
                    <div class="date-li" v-for='labelItem in dateShowContent' :class="{'date-li-disabled':labelItem.disabled}" >{{labelItem.label}}</div>
                </td>
                <td v-for="item in list" :class='{shadowsBg:editShow[item.date],disabled:editShowKeyArray.indexOf(item.date)==-1}' @mouseout='mouseout(item.date)'>
                    <div class="date-li-warpper" @mouseover.stop.prevent='mouseover(item.date)' @click='editThisDate(item)'>
                        <div class="date-li-header">{{item.date}}</div>
                        <div class="date-li" v-for='nameItem in dateShowContent' :class="{'date-li-disabled':nameItem.disabled}">
							<template v-if='nameItem.child'>
							  	<p v-for='child in nameItem.child' >
									<span>{{item[nameItem.name]}}</span>
								</p>
							</template>
							<template v-else>
							  <span v-if="item[nameItem.name]">{{item[nameItem.name]}}</span>
							</template>
						</div>
						<i class="write icon date-edit"></i>
                    </div>

                </td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';


import editStockPop from './editStockPop'

export default {
    components: {
        editStockPop
    },
    props: {
        nowDate: {
            default: tool.dateFormat(new Date(), 'yyyy-MM-dd')
        },
        year: {
            default: new Date().getFullYear()
        },
        month: {
            default: new Date().getMonth() + 1
        },
        stockData: {
            type: Array,
            default: function() {
                return []
            }
        },
		dateShowContent:{
			type: Array,
			default(){
				return []
			}
		},
    },
    data() {
        return {
            weekDay: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            editShow: {},
            singleStockShow: false,
            singleStockData: {},
        }
    },
    created() {
	},
    methods: {
        mouseover(date) {
            if (this.editShowKeyArray.indexOf(date) > -1) {
                this.editShow[date] = true
            }
        },
        mouseout(date) {
            if (this.editShowKeyArray.indexOf(date) > -1) {
                this.editShow[date] = false
            }
        },
        editThisDate(data) {
            if (this.editShowKeyArray.indexOf(data.date) > -1) {
                this.singleStockShow = true;
                this.singleStockData = data;
            }
        },
        updatesingleStock(data) {
            this.singleStockShow = false;
            this.$emit('updateStock', data)
        }
    },
    computed: {
        stockDataOb() {
            let data = {};
            this.stockData.forEach(item => {
                data[item.date] = item;
            });
            return data;
        },
        editShowKeyArray() {
            return Object.keys(this.editShow) || []
        },
        allDateData() {
            let day_num = new Date(this.year, this.month, 0).getDate();
            let data = [];
            for (let i = 1; i <= day_num; i++) {
                let Tdate = new Date(`${this.year}-${this.month}-${i}`);
                let thatDate = tool.dateFormat(Tdate, 'yyyy-MM-dd');
                //为今天之后的日期添加editShow
                if (Tdate > (new Date(new Date().getTime() - 60 * 60 * 24 * 1000))) {
                    this.$set(this.editShow, thatDate, false)
                }
                if (this.stockDataOb[thatDate]) {
                    data.push(this.stockDataOb[thatDate])
                } else {
                    data.push({
                        date: thatDate
                    })
                }
            }
            while (new Date(data[0].date).getDay() > 0) {
                let thatDate = new Date(data[0].date);
                thatDate.setDate(thatDate.getDate() - 1);
                thatDate = tool.dateFormat(thatDate, 'yyyy-MM-dd');
                if (this.stockDataOb[thatDate]) {
                    data.unshift(this.stockDataOb[thatDate])
                } else {
                    data.unshift({
                        date: thatDate
                    })
                }
            }
            while (new Date(data[data.length - 1].date).getDay() < 6) {
                let thatDate = new Date(data[data.length - 1].date);
                thatDate.setDate(thatDate.getDate() + 1);
                thatDate = tool.dateFormat(thatDate, 'yyyy-MM-dd');
                if (this.stockDataOb[thatDate]) {
                    data.push(this.stockDataOb[thatDate])
                } else {
                    data.push({
                        date: thatDate
                    })
                }
            }
            return data
        },
        stockDateCom() {
            let week_num = this.allDateData.length / 7;
            let data = [];
            for (let i = 0; i < week_num; i++) {
                data.push(this.allDateData.slice(i * 7, i * 7 + 7))
            }
            return data
        }
    }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.date-piker {
    .ui.table td {
        padding: 0;
        position: relative;
        .date-li-warpper {
            position: relative;
            .date-edit {
                color: rgb(255,255,255);
				position: absolute;
				bottom: 5px;
				right: 5px;
                display: block;
                float: right;
            }
        }
        .date-li,
        .date-li-header {
            padding: 3px 5px;
            min-height: 28px;
        }
        .date-li {
            position: relative;
            z-index: 0;
            border-top: 1px solid rgba(34,36,38,.1);
        }
        .date-li-header {
            background: rgba(0,0,0,0.1);
        }
		.date-li-disabled{
			color: rgba(40,40,40,.3)
		}
        &.shadowsBg {
            background: #888;
        }

    }
}
</style>
